<template>
    <div class="login-container">
        <div class="logo" />
        <div class="form">
            <h1>登录</h1>
            <el-card shadow="never" class="login-card">
                <!--登录表单-->
                <el-form :model="loginForm" ref="form" :rules="loginRules">
                    <el-form-item prop="mobile">
                        <el-input v-model="loginForm.mobile" placeholder="请输入手机号！"></el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" placeholder="请输入密码！"></el-input>
                    </el-form-item>

                    <el-form-item prop="isAgree">
                        <el-checkbox v-model="loginForm.isAgree">用户平台使用协议</el-checkbox>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" round @click="login">点击进入月亮王国</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>
<script>

export default {
    name: "Login",
    data() {
        return {
            loginForm: {
                // mobile: '16816891689',
                // password: 'MoonKing',
                // isAgree: false

                mobile:process.env.NODE_ENV === 'development' ? '15212345678' : '',
                password:process.env.NODE_ENV === 'development' ? '123456' : '',
                isAgree:process.env.NODE_ENV === 'development'
            },
            //规则
            loginRules: {
                mobile: [{
                    required: true,//必填项
                    message: '不填手机号吗？？？？！！！！',
                    trigger: 'blur',//触发时机
                }, {
                    pattern: /^1[3-9]\d{9}$/,//正则表达式
                    message: '你所填的手机号格式不对哟！',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,//必填项
                    message: '你没输入密码哟！',
                    trigger: 'blur',//触发时机
                }, {
                    min: 6,
                    max: 16,
                    message: '密码有点短不安全呦，密码太长有点复杂呢！',
                    trigger: 'blur'
                }],
                isAgree: [{
                    //勾没勾选
                    validator: (rule, value, callback) => {//规则，要检查的数据，回调函数
                        value ? callback() : callback(new Error('不同意条款就不许玩！！！'))
                    }
                }]
            }
        }
    },
    methods: {//页面中的函数方法
        login() {
            //登录
            this.$refs.form.validate(async (isOK) => {
                if (isOK) {
                    //校验通过（vuex状态管理）
                    await this.$store.dispatch("user/login", this.loginForm)
                    //跳转页面    根目录主页
                    this.$router.push('/')
                }
            })
        }
    }
}
</script>
<style lang="scss">
.login-container {
    display: flex;
    align-items: stretch;
    height: 100vh;

    .logo {
        flex: 3;
        background: rgba(38, 72, 176) url(../../assets/common/login_back.png) no-repeat center / cover;
        border-top-right-radius: 60px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        padding: 0 100px;

        .icon {
            background: url(../../assets/common/logo.png) no-repeat 70px center / contain;
            width: 300px;
            height: 50px;
            margin-bottom: 50px;
        }

        p {
            color: #fff;
            font-size: 18px;
            margin-top: 20px;
            width: 300px;
            text-align: center;
        }
    }

    .form {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 176px;

        .el-card {
            border: none;
            padding: 0;
        }

        h1 {
            padding-left: 20px;
            font-size: 24px;
        }

        .el-input {
            width: 350px;
            height: 44px;

            .el-input__inner {
                background: #f4f5fb;
            }
        }

        .el-checkbox {
            color: #606266;
        }
    }
}
</style>